<template>
<div :class="[$style.container]">
  <div :class="[$style.header]">
    <span :class="[$style.title]">文件动态</span>
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-link :underline="false">{{current && current.label}} <i class="el-icon-arrow-down el-icon--right"></i></el-link>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :class="[selectCls(row)]" v-for="row in days" :key="row.value" @click.native="onSelect(row)">
          <span class="mx-3">{{row.label}}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
  <div>
    <ul :class="[$style.list]" v-loading="loading" v-if="data">
      <li :class="[$style.item]" v-for="row in rows" :key="row.name">
        <span :class="[$style.text]">
          <span><i :class="row.icon"></i></span>
          <span class="ml-2">{{row.label}}</span>
        </span>
        <span :class="[$style.action]">{{row.count}}</span>
      </li>
    </ul>
  </div>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import { querySummariesByDoc } from '@/api/file-dynamic'
import moment from 'moment'

const days = [
  { value: 7, label: '7天内' },
  { value: 15, label: '15天内' },
  { value: 30, label: '30天内' },
  { value: 45, label: '45天内' },
  { value: 60, label: '60天内' }
]

@Component
export default class FileTrends extends Vue {
  @Prop() data!: any

  current = days[0]

  days = days

  loading = false

  rows = [
    { name: 'preview', label: '预览', count: 0, icon: 'el-icon-view' },
    { name: 'update', label: '更新', count: 0, icon: 'el-icon-upload2' },
    { name: 'download', label: '下载', count: 0, icon: 'el-icon-download' },
    { name: 'comment', label: '评论', count: 0, icon: 'el-icon-s-comment' }
  ]

  selectCls (row: any) {
    return row === this.current ? 'selected' : ''
  }

  onSelect (row: any) {
    this.current = row || null
    this.loadData()
  }

  loadData () {
    const startDate = moment().subtract(this.current.value, 'days').format('YYYY/MM/DD')
    this.loading = true
    querySummariesByDoc(this.data?.id, startDate).then(data => {
      this.rows.forEach(v => {
        const row = data.find(w => w.type === v.name)
        if (row) v.count = row.count || 0
      })
    }).finally(() => {
      this.loading = false
    })
  }

  created () {
    this.loadData()
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

.title {
  color: $text-heading-color;
  font-weight: 600;
}

.header {
  padding: 4px 12px;
  display: flex;
  justify-content: space-between;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 8px 0;
  padding: 4px 20px;
  display: flex;
}

.text {
  flex:  1 1 auto;
}

.action {

}
</style>
